<template>
  <el-dialog
    class="dia-style"
    :title="title"
    :visible.sync="open"
    append-to-body
    width="1400px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dia-title">查询条件</div>
    <div style="position: relative">
      <HkSearchform
        :data="searchFormObj.searchData"
        :field-list="searchFormObj.fieldList"
        :listTypeInfo="searchFormObj.listTypeInfo"
        @handleSearch="handleQuery"
        @handleReset="handleReset"
        v-if="showTable"
      />
      <i class="el-icon-s-operation" @click="showTable = !showTable">{{
        showTable ? "点击收起" : "点击展开"
      }}</i>
    </div>
    <HkTable
      ref="tableRef"
      :loading="loading"
      :tableData="tableData"
      :tableColumns="tableList"
      :showIndex="true"
      :total="total"
      :operate="true"
      :tableHeight="80"
      :queryParams="queryParams"
      @changePage="getList"
    >
      <template #operate="scope">
        <el-button size="mini" type="text">详情</el-button>
      </template>
    </HkTable>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

  <script>
import HkSearchform from "@/components/common/HkSearchform/index.vue";
import HkTable from "@/components/common/Hk-Table";

export default {
  prop:{
    searchFormObj:{
      type:Object,
      default(){
        return {

        }
      }
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      total: 0,
      // 表格数据
      tableData: [
        {
          name: "事件名称",
        },
      ],
      // 查询参数
      queryParams: {
        size: 10,
        current: 1,
      },
      //  表格
      tableList: [
        { label: "标签名称", param: "name" },
        { label: "标签状态", param: "status", type: "slot" },
        { label: "标签分析方式", param: "analyseType", type: "slot" },
      ],
      //   是否展示表格
      showTable: true,
      // 对话框是否显示
      open: false,
      // 搜索项
     /* searchFormObj: {
        fieldList: [
          {
            label: "关键字",
            type: "input",
            field: "dictName",
          },
          {
            label: "发生时间",
            type: "select",
            field: "dictType",
            list: "statusBoxList",
          },
          {
            label: "级别",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "分类",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "类型",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "处置状态",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
        ],
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          statusBoxList: [
            { label: "正常", value: "0" },
            { label: "停用", value: "1" },
          ],
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },*/
    };
  },
  props: {
    // 标题
    title: {
      type: String,
      default: "事件列表",
    },
  },
  computed: {},
  methods: {
    toggleTable() {},
    /** 搜索按钮操作 */
    handleQuery(data) {
      this.queryParams.current = 1;
      this.getList(data);
    },
    // 重置按钮
    handleReset() {
      this.queryParams = {};
      this.getList();
    },
    getList(val) {
      this.loading = true;
      this.queryParams = { ...this.queryParams, ...val };
      this.loading = false;
      //   });
    },
    // 清空表单
    resetFields() {
      this.$refs["form"].resetFields();
    },
    show(id) {
      return new Promise((resolve, reject) => {}).then((res) => {
        this.open = true;
      });
    },
    // 提交事件
    async submitForm() {},
    // 关闭按钮
    cancel() {},
  },
  mounted() {},
  watch: {},
  components: { HkSearchform, HkTable },
};
</script>

  <style lang="scss" scoped>
.dia-title {
  width: 50%;
  padding: 0.625rem;
  font-size: 1.25rem;
  background-image: linear-gradient(
    270deg,
    rgba(59, 139, 255, 0) 0%,
    #063e62 100%
  );
}
::v-deep {
  .content{
    padding-bottom: 0;
  }
  .el-icon-s-operation {
    position: absolute;
    right: 20px;
   bottom: 0;
    color: #00dfe0;
    cursor: pointer;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 0 !important;
  }
  .el-row {
    display: flex;
    align-items: flex-end;
  }
}
</style>
